import { useRef, useState } from "react";
/**
 * 作用：
 * 1. 保存一个可变的值，这个值在整个生命周期内保持不变。
 * 2. 获取DOM元素
 * 
 * 注意：
 * 1. 组件在重新渲染的时候，useRef的值不会被重新初始化。
    2.改变 ref.current 属性时，React 不会重新渲染组件。React 不知道它何时会发生改变，因为 ref 是一个普通的 JavaScript 对象。
   3. useRef的值不能作为useEffect等其他hooks的依赖项，因为它并不是一个响应式状态。
    4.useRef不能直接获取子组件的实例，需要使用forwardRef。
 * @returns obj.current 返回一个普通js对象
 */

export function UseRefDemo() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [count, setCount] = useState(0);

  // 此时读取为空
  console.log("useRef==>", inputRef.current);

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  //   定时器案例,利用useRef的值不会被重新初始化的特性
  // const timer = useRef<NodeJS.Timeout | null>(null);
  // 在 TypeScript 中，NodeJS.Timeout 是 Node.js 特有的类型，它表示由 setTimeout 或 setInterval 返回的定时器 ID。如果你想在 React 中使用这个类型，你需要确保你的项目配置了正确的 TypeScript 类型定义文件。
  const timer = useRef<number | null>(null);

  const start = () => {
    timer.current = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
  };

  const stop = () => {
    if (timer.current) {
      clearInterval(timer.current);
      timer.current = null;
    }
  };

  return (
    <div>
      <h3>useRef学习</h3>
      <input placeholder="Focus me" ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
      <p>Count: {count}</p>
      <button onClick={() => start()}>开始</button>
      <button onClick={() => stop()}>停止</button>
    </div>
  );
}
